<template>
  <div class="mid-box">
    <div class="main-box table-box">
      <div class="table-box-title ClearFloat">
        <div class="troila-form">
          <el-button
            v-limit="`system:organization:add`"
            @click="btnClick('add')"
            ><unit-icon class="troila-icon" type="addLine" />添加</el-button
          >
          <el-button @click="btnClick('fold')" v-if="showStatus"
            ><unit-icon class="troila-icon" type="change" />展开/折叠</el-button
          >
        </div>
      </div>
      <unit-table
        v-if="!btnGroup.card"
        row-key="id"
        children="children"
        :treeFold="treeFold"
        :loading="loading"
        :title="tableTitle"
        :data="tableData"
        :operation="tableOperation"
        :dictionary="dictionary"
        @return="tableReturn"
      />
      <pagination
        v-show="pager.total > pager.size"
        :pager="pager"
        @query="getList"
        ref="Pagerpagination"
      ></pagination>
    </div>
    <dialog-form v-model="showForm" @change="getList" />
  </div>
</template>
<script>
import dialogForm from './dialog/organizationForm'
import { getItemVal } from '../../../../assets/js/utils'
export default {
  name: 'organization',
  components: {
    dialogForm,
  },
  data() {
    return {
      searchObj: {}, //搜索参数
      searchRes: {}, //搜索储存值
      loading: false,
      showStatus: true,
      time: null, //时间组件值
      btnGroup: {
        //按钮组
        search: true,
        refresh: false,
      },
      pager: {
        // 页码
        total: 0,
        page: 1, //当前第几页
        size: 10, //每页显示的条数
      },
      dictionary: {
        // menuStatus: [
        //   { dictName: '禁用', dictCode: 0 },
        //   { dictName: '启用', dictCode: 1 },
        // ],
      },
      allTitle: [
        // 全部可显示表头
        {
          label: '组织机构管理', //*表头名称
          code: 'organizationName', //*对应数据项
          tooltip: true, //超出显示浮层
          sort: false, //是否显示排序
          width: 110, //最小宽
        },
      ],
      chooseTitle: [
        //被选中显示表头
        'organizationName',
      ],
      tableData: [],
      tableOperation: [
        //表格操作
        // *code 对应图标, label 对应浮层显示文字, show 判断是否显示, color 图标颜色
        {
          code: 'add',
          label: '添加子项',
          limit: 'system:organization:add',
          disabled: (item) => {
            return item.menuKind == 2
          },
        },
        { code: 'edit', limit: 'system:organization:edit' },
        {
          code: 'delete',
          limit: 'system:organization:delete',
          //  color: '#D13633'
        },
      ],
      treeFold: true, //展开收起
      showForm: false, //弹窗显示-新建修改
    }
  },
  computed: {
    tableTitle() {
      //表格表头
      return this.allTitle.filter(
        (item) => this.chooseTitle.indexOf(item.code) > -1
      )
    },
    menuList() {
      let list = this.$store.state.dictionary.base_status
      this.dictionary.menuStatus = list
      return list ? list : []
    },
  },
  methods: {
    // 获取列表
    getList() {
      let param = {
        pageNum: this.pager.page,
        pageSize: this.pager.size,
        ...this.searchRes,
      }
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.showStatus = true
        this.pager.total = 4
        this.tableData = [
          { id: 1, children: [{ id: 11 }, { id: 12 }] },
          { id: 2, children: [{ id: 21 }, { id: 22 }] },
          { id: 3, children: [{ id: 31 }, { id: 32 }] },
          { id: 4, children: [{ id: 41 }, { id: 42 }] },
        ]
      }, 100)
      return
      this.API.organization
        .pageList(param)
        .then((res) => {
          this.loading = false
          if (res.data) {
            this.tableData = res.data.records || []
            this.pager.total = res.data.total
          }
          // console.log(this.tableData)
        })
        .catch((err) => {
          this.loading = false
        })
    },
    // 日期控件操作
    changeDate() {
      // console.log(this.time)
    },
    // 重置
    resetForm() {
      this.$refs.searchInfo.resetFields()
      this.searchRes = {}
      this.pager.page = 1
      this.getList()
    },
    // 搜索
    submitSearch() {
      this.searchRes = { ...this.searchObj }
      this.pager.page = 1
      this.getList()
    },
    // 按钮操作
    btnClick(method) {
      // console.log(method)
      switch (method) {
        case 'add':
          this.showForm = { method }
          break
        case 'fold':
          this.treeFold = !this.treeFold
          break
      }
    },
    // 获取值
    judgeChild(row) {
      let arr = []
      if (row.children && row.children.length > 0) {
        arr = row.children.map((v) => v.organizationType)
      } else {
        return ''
      }
      arr = arr
        .filter((v) => !isNaN(Number(v)))
        .sort((a, b) => Number(a) - Number(b))
      console.log(arr.length > 0 ? arr[0] : 'string')
      return arr.length > 0 ? arr[0] : 'string'
    },
    // 表格操作
    tableReturn(method, { row, prop, order, selection }) {
      // console.log(method, row, prop, order, selection)
      let text = '',
        api = '',
        param = {}
      switch (method) {
        case 'add':
          this.showForm = {
            method,
            pid: row.id,
            parentOrganizationType: row.organizationType,
            childOrganizationType: '',
          }
          return
        case 'edit':
          this.showForm = {
            ...row,
            method,
            pid: row.pid,
            parentOrganizationType: getItemVal(
              this.tableData,
              'organizationType',
              row.pid
            ),
            childOrganizationType: this.judgeChild(row),
          }
          return
        case 'delete':
          console.log(row)
          if (row.children && row.children.length > 0) {
            this.$alertFn.error('该组织机构已有子项，无法删除')
            return
          }
          text = '删除'
          api = 'removeOrganization'
          param = {
            id: this.recursion(row).join(','), //{ id: 'id', children: 'children' }
          }
          break
        default:
          return
      }
      this.$confirmFn(
        `您确定要${text}<span class='light'>${row.organizationName}</span>${
          method == 'start' || !row.children || row.children.length == 0
            ? ''
            : '及其子项'
        }吗？`,
        '提示',
        {
          callback: (action, instance) => {
            if (action == 'cancel ') {
              return
            } else if (action == 'confirm') {
              // console.log(method, row)
              // console.log(api, this.API.organization[api])
              this.API.organization[api](param)
                .then((res) => {
                  this.ajaxIng = false
                  this.$alertFn.success(`${text}成功 ！`)
                  this.getList()
                })
                .catch((err) => {
                  this.ajaxIng = false
                  // this.$alertFn.error(`${text}失败 ！`)
                })
            }
          },
        }
      )
    },
  },
  mounted() {
    this.submitSearch()
  },
  destroyed() {},
}
</script>
<style scoped>
.table-box {
  padding-top: 52px;
}
</style>
